<template>
	<view class="body">
		<!--头部，登录或者非登录界面 （ 没有登录的逻辑）-->
		<view >
		<view class="login-loging" >
			<view class="src-user">
				<view class="pic-left">
					<image   :src="isLogining ? userPic2:userPic1"  :class="isLogining ? 'user-pic' : 'pic-nologin'" > </image>
				</view>
				
				<!--头像右侧区域start-->
				<view class="login-right">
					<view class="login-right-top">
						<button class="login-button" v-show="!isLogining"   :class="{ 'login-button--down': !isLogining }"  
						@click="tologing()"
						>立即登录</button>
						<view class="credit" v-show="isLogining">信用分：{{credit}}</view>
						
					</view>
					<view class="login-right-btm" v-show="isLogining">
						<view class="openPlus"   >开通Plus</view>
						<view class="blank"></view>
						<view class="jifen-contain"   v-show="isLogining">
							<image src="../../static/stars.png"      class="jifen-pic"></image>
							<view class="jifen" >{{jifen}}</view>
							
						</view>
						<view class="blank"></view>
						<view class="person"  v-show="isLogining">个人主页></view>
					</view>
					
				</view>
				<!--头像右侧区域start-->
			</view>
			
			<view>
				
			</view>
			
		</view>
		<!--头部，登录或者非登录界面 （ 没有登录的逻辑）end-->
		<!--头部，登录或者非登录界面 （ 登录的逻辑）start-->
		
		<!--头部，登录或者非登录界面 （ 登录的逻辑）end-->
		</view>
		<!--书架页面start-->
		<view class="shujia-all" style="
		width: 80%;
		border-radius: 5%;
		background-color: white;
		height: 300rpx;
		margin: auto;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		">
		<view style="
		display: flex;
				justify-content: space-between;
			
		">
			
			<view style="font-weight: bold;
				margin-left: 20rpx;
			">书架</view>
			<view style="float: right;font-weight: bold;">
				>
			</view>
		</view>	
		
		<!--书架内容-->
		<view >
		<view v-if="bookList.length>0">
			<!--如果有书，则获取书的内容展示-->
		</view>
		<view v-else style="color: #B2B2B2;">
			<!--如果没有书，则展示前往搜索href-->
			书架是空的，去找找喜欢的书吧~
			<view style="width: 80%;
			background-color:#F1F1F1 ;
			height: 150rpx;
			margin: auto;
			">
				
			</view>
		</view>
		</view>
		
		
		
			
		</view>
		<!--书架页面end-->
	
	</view>
</template>

<script>
	
	import { wxlogin } from '@/config/api.js'
	
	export default {
		
		data() {
			return {
				credit:0,
				jifen:30,
				bookList:[1],
				isLogining:false,
				
				//登录成功
				userPic2:'../../static/stars.png',
				
				//登录失败
				userPic1:'../../static/user (2).png',
			}
		},
		methods: {
			
			//登录函数
			tologing(){
				let _this = this;
				wx.login({
					success:async (res)=>{
						if (res.code) {
							_this.code = res.code;
							const params = {
								code:res.code
							}
							try{
								  const data = await  wxlogin(params);
								  
								  console.log("成功res.data"+JSON.stringify(data))
								  this.$store.commit('setUserInfo',data); // 将数据保存到store中,wxtoken
								   console.log("store-wxtoken"+JSON.stringify(this.$store.state.userInfo)); // 打印userInfo
								  _this.isLogining = true
						
							}catch(error){
								console.log("try WxLogin报错登录后台失败");
							}
							
						
				
							
						} else {
							console.log("请求code失败或code为空");
						}
					},fail:(error)=>{
						console.log("wx.login调用失败", error);
					}
				}
				
				
				);
					
			}
			//登录函数tologing--end
		}
	}
</script>

<style>
	.pic-nologin{
		left: 150rpx;
		object-fit: contain;
		width: 120rpx;
		height: 120rpx;
		margin-left: 100rpx;
		margin-top: 30rpx;
	}
	.login-button--down{
		display: flex;
		align-items: center;
		margin-top: 10px;
		transition: transform 0.2s;
		 box-shadow: inset -5px 5px 10px rgba(254, 134, 180, 0.5);
	}
	.login-button--down:active{
		transform: translateY(2px);
	}
	.blank{
		flex:0.2;
	}
	.jifen-contain{
		align-items: center;
		border-radius: 10%;
		background-color: #F1DFE6;
		flex:1;
		display: flex;
		flex-direction: row;
		width: 30rpx;
		height: 100%;
		box-shadow: inset -5px 5px 10px rgba(255, 183, 215, 0.5);
	}
	.body{
		background-color:#F5F5F5 ;
		height: 100%;
		width: 100%;
	}
	.jifen{
		flex:1;
		color: #FE2D75;
		
	}
	.openPlus{
		padding-left: 30rpx;
		background-color: #CCCCCC;
		color: white;
		flex:1;
		border-radius: 10%;
		 box-shadow: inset -5px 5px 10px rgba(139, 140, 138, 0.5);
	}
	.jifen-view{
		flex:1;
		
	}
	.person{
		flex:1;
		float: right;
	}
	.login-right-btm{
		justify-content: space-around;
		display: flex;
		flex-direction: row;
	}
	.jifen-pic{
		padding-left: 30rpx;
		width: 30rpx;
		height: 30rpx;
	}
	.credit{
		
		flex:1;
	}
	.login-right-top{
		padding: 30rpx;
		justify-content: space-around;
		display: flex;
	}
	.login-right{
		flex:3;
		display: flex;
		flex-direction: column;

	}
	.pic-left{
		flex: 1;
		
	}
	.login-button{
		margin-left: -30rpx;
		margin-right: 10rpx;
		background-color: #D4237A;
		color: white;
		font-weight: bold;
		width: 220rpx;
		height: 50rpx;
		align-items: center;
		display: flex;
		justify-content: center;
		
		
	}
	.src-user{
		width: 100%;
		height: 200rpx;

		display: flex;
		
	}
	.user-pic{
		object-fit: contain;
		width: 100rpx;
		height: 100rpx;
		margin: 40rpx;
		
		
	}
</style>
